<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Different History modes | Vue Router</title>
    <meta name="description" content="The official router for Vue.js.">
    <link rel="stylesheet" href="static/css/style.720cf281.css">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/Home.5d2e3154.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.78f8f7a5.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.823f6de3.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/AlgoliaSearchBox.b1511f6a.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/app.4a3417cf.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/guide_essentials_history-mode.md.59a2bcce.lean.js">
    
    <link rel="icon" href="static/picture/logo.png">
  <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
  <script src="static/js/thesemetrics@latest.js" async=""></script>
  <meta name="twitter:title" content="Different History modes | Vue Router">
  <meta property="og:title" content="Different History modes | Vue Router">
  </head>
  <body>
    <div id="app"><div class="main-container" data-v-46b24580=""><!----><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="javascript:;" aria-label="Vue Router, back to home" data-v-675d8756="" data-v-4a583abe=""><!----> Vue Router</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--[--><div class="sponsors sponsors-top" data-v-46b24580=""><span data-v-46b24580="">Platinum Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="introduction2.html">Introduction</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="installation1.html">Installation</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">Essentials</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Getting Started</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="dynamic-matching.html">Dynamic Route Matching</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="route-matching-syntax.html">Routes&#39; Matching Syntax</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="nested-routes.html">Nested Routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="navigation.html">Programmatic Navigation</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="named-routes.html">Named Routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="named-views.html">Named Views</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="redirect-and-alias.html">Redirect and Alias</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="passing-props.html">Passing Props to Route Components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="">Different History modes</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#hash-mode">Hash Mode</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#html5-mode">HTML5 Mode</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#example-server-configurations">Example Server Configurations</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#apache">Apache</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#nginx">nginx</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#native-node-js">Native Node.js</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#express-with-node-js">Express with Node.js</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#internet-information-services-iis">Internet Information Services (IIS)</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#caddy-v2">Caddy v2</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#caddy-v1">Caddy v1</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#firebase-hosting">Firebase hosting</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#netlify">Netlify</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#caveat">Caveat</a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="navigation-guards.html">Navigation guards</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="meta.html">Route Meta Fields</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="data-fetching.html">Data Fetching</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="composition-api1.html">Composition API</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="transitions.html">Transitions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="scroll-behavior.html">Scroll Behavior</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="lazy-loading.html">Lazy Loading Routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="extending-router-link.html">Extending RouterLink</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="navigation-failures.html">Navigation Failures</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="dynamic-routing.html">Dynamic Routing</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="index18.html">Migrating from Vue 2</a><!----></li><!--]--></ul><!--[--><!--[--><div class="sponsors" data-v-46b24580=""><span data-v-46b24580="">Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" ref_key="el" data-v-5941b830=""></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="different-history-modes" tabindex="-1">Different History modes <a class="header-anchor" href="#different-history-modes" aria-hidden="true">#</a></h1><div class="vueschool" data-v-c75c0842=""><a href="javascript:;" target="_blank" rel="sponsored noopener" title="Learn about the differences between Hash Mode and HTML5 Mode" data-v-c75c0842=""><!--[-->Watch a free video lesson on Vue School<!--]--></a></div><p>The <code>history</code> option when creating the router instance allows us to choose among different history modes.</p><h2 id="hash-mode" tabindex="-1">Hash Mode <a class="header-anchor" href="#hash-mode" aria-hidden="true">#</a></h2><p>The hash history mode is created with <code>createWebHashHistory()</code>:</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHashHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue-router&#39;</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>It uses a hash character (<code>#</code>) before the actual URL that is internally passed. Because this section of the URL is never sent to the server, it doesn&#39;t require any special treatment on the server level. <strong>It does however have a bad impact in SEO</strong>. If that&#39;s a concern for you, use the HTML5 history mode.</p><h2 id="html5-mode" tabindex="-1">HTML5 Mode <a class="header-anchor" href="#html5-mode" aria-hidden="true">#</a></h2><p>The HTML5 mode is created with <code>createWebHistory()</code> and is the recommended mode:</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue-router&#39;</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>When using <code>createWebHistory()</code>, the URL will look &quot;normal,&quot; e.g. <code>https://example.com/user/id</code>. Beautiful!</p><p>Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access <code>https://example.com/user/id</code> directly in their browser. Now that&#39;s ugly.</p><p>Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn&#39;t match any static assets, it should serve the same <code>index.html</code> page that your app lives in. Beautiful, again!</p><h2 id="example-server-configurations" tabindex="-1">Example Server Configurations <a class="header-anchor" href="#example-server-configurations" aria-hidden="true">#</a></h2><p><strong>Note</strong>: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use <a href="javascript:;" target="_blank" rel="noopener noreferrer">the <code>publicPath</code> option of Vue CLI</a> and the related <a href="javascript:;"><code>base</code> property of the router</a>. You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing <code>RewriteBase /</code> with <code>RewriteBase /name-of-your-subfolder/</code>).</p><h3 id="apache" tabindex="-1">Apache <a class="header-anchor" href="#apache" aria-hidden="true">#</a></h3><div class="language-apacheconf"><pre><code><span class="token directive-block tag"><span class="token directive-block tag"><span class="token punctuation">&lt;</span>IfModule</span><span class="token directive-block-parameter attr-value"> mod_rewrite.c</span><span class="token punctuation">&gt;</span></span>
  <span class="token directive-inline property">RewriteEngine</span> On
  <span class="token directive-inline property">RewriteBase</span> /
  <span class="token directive-inline property">RewriteRule</span><span class="token regex"> ^index\.html$</span> - <span class="token directive-flags keyword">[L]</span>
  <span class="token directive-inline property">RewriteCond</span> <span class="token variable">%{REQUEST_FILENAME}</span> !-f
  <span class="token directive-inline property">RewriteCond</span> <span class="token variable">%{REQUEST_FILENAME}</span> !-d
  <span class="token directive-inline property">RewriteRule</span> . /index.html <span class="token directive-flags keyword">[L]</span>
<span class="token directive-block tag"><span class="token directive-block tag"><span class="token punctuation">&lt;/</span>IfModule</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Instead of <code>mod_rewrite</code>, you could also use <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>FallbackResource</code></a>.</p><h3 id="nginx" tabindex="-1">nginx <a class="header-anchor" href="#nginx" aria-hidden="true">#</a></h3><div class="language-nginx"><pre><code><span class="token directive"><span class="token keyword">location</span> /</span> <span class="token punctuation">{</span>
  <span class="token directive"><span class="token keyword">try_files</span> <span class="token variable">$uri</span> <span class="token variable">$uri</span>/ /index.html</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="native-node-js" tabindex="-1">Native Node.js <a class="header-anchor" href="#native-node-js" aria-hidden="true">#</a></h3><div class="language-js"><pre><code><span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> httpPort <span class="token operator">=</span> <span class="token number">80</span>

http
  <span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;utf-8&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> content</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;We cannot open &quot;index.html&quot; file.&#39;</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>

      res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token string-property property">&#39;Content-Type&#39;</span><span class="token operator">:</span> <span class="token string">&#39;text/html; charset=utf-8&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>httpPort<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Server listening on: http://localhost:%s&#39;</span><span class="token punctuation">,</span> httpPort<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="express-with-node-js" tabindex="-1">Express with Node.js <a class="header-anchor" href="#express-with-node-js" aria-hidden="true">#</a></h3><p>For Node.js/Express, consider using <a href="javascript:;" target="_blank" rel="noopener noreferrer">connect-history-api-fallback middleware</a>.</p><h3 id="internet-information-services-iis" tabindex="-1">Internet Information Services (IIS) <a class="header-anchor" href="#internet-information-services-iis" aria-hidden="true">#</a></h3><ol><li>Install <a href="javascript:;" target="_blank" rel="noopener noreferrer">IIS UrlRewrite</a></li><li>Create a <code>web.config</code> file in the root directory of your site with the following:</li></ol><div class="language-xml"><pre><code><span class="token prolog">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>configuration</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>system.webServer</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rewrite</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rules</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rule</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Handle History Mode and custom 404/500<span class="token punctuation">&quot;</span></span> <span class="token attr-name">stopProcessing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>match</span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(.*)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>conditions</span> <span class="token attr-name">logicalGrouping</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>MatchAll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>add</span> <span class="token attr-name">input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{REQUEST_FILENAME}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">matchType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IsFile<span class="token punctuation">&quot;</span></span> <span class="token attr-name">negate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>add</span> <span class="token attr-name">input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{REQUEST_FILENAME}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">matchType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IsDirectory<span class="token punctuation">&quot;</span></span> <span class="token attr-name">negate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>conditions</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>action</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Rewrite<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rule</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rules</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rewrite</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>system.webServer</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>configuration</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="caddy-v2" tabindex="-1">Caddy v2 <a class="header-anchor" href="#caddy-v2" aria-hidden="true">#</a></h3><div class="language-"><pre><code>try_files {path} /
</code></pre></div><h3 id="caddy-v1" tabindex="-1">Caddy v1 <a class="header-anchor" href="#caddy-v1" aria-hidden="true">#</a></h3><div class="language-"><pre><code>rewrite {
    regexp .*
    to {path} /
}
</code></pre></div><h3 id="firebase-hosting" tabindex="-1">Firebase hosting <a class="header-anchor" href="#firebase-hosting" aria-hidden="true">#</a></h3><p>Add this to your <code>firebase.json</code>:</p><div class="language-json"><pre><code><span class="token punctuation">{</span>
  <span class="token property">&quot;hosting&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;public&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dist&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rewrites&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token property">&quot;source&quot;</span><span class="token operator">:</span> <span class="token string">&quot;**&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;destination&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/index.html&quot;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="netlify" tabindex="-1">Netlify <a class="header-anchor" href="#netlify" aria-hidden="true">#</a></h3><p>Create a <code>_redirects</code> file that is included with your deployed files:</p><div class="language-"><pre><code>/* /index.html 200
</code></pre></div><p>In vue-cli, nuxt, and vite projects, this file usually goes under a folder named <code>static</code> or <code>public</code>.</p><p>You can more about the syntax on <a href="javascript:;" target="_blank" rel="noopener noreferrer">Netlify documentation</a>. You can also <a href="javascript:;" target="_blank" rel="noopener noreferrer">create a <code>netlify.toml</code></a> to combine <em>redirections</em> with other Netlify features.</p><h2 id="caveat" tabindex="-1">Caveat <a class="header-anchor" href="#caveat" aria-hidden="true">#</a></h2><p>There is a caveat to this: Your server will no longer report 404 errors as all not-found paths now serve up your <code>index.html</code> file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page:</p><div class="language-js"><pre><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/:pathMatch(.*)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> NotFoundComponent <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL and respond with 404 if no route is matched. Check out the <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue server side rendering documentation</a> for more information.</p></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-fb8d84c6=""><div class="edit" data-v-fb8d84c6=""><div class="edit-link" data-v-fb8d84c6="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Suggest changes to this page <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-fb8d84c6=""><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4="" data-v-38ede35f=""><div class="container" data-v-38ede35f=""><div class="prev" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f=""><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f="">Passing Props to Route Components</span></a></div><div class="next" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><span class="text" data-v-38ede35f="">Navigation guards</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f=""><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17=""><div class="bsa-cpc" data-v-4ce5ad17=""></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"321240c3\",\"guide_advanced_composition-api.md\":\"68a790ce\",\"guide_advanced_data-fetching.md\":\"370bc89e\",\"guide_advanced_dynamic-routing.md\":\"f79d5ab5\",\"guide_advanced_extending-router-link.md\":\"b5cf395a\",\"guide_advanced_lazy-loading.md\":\"7a352201\",\"guide_advanced_meta.md\":\"5a4590ab\",\"guide_advanced_navigation-failures.md\":\"343e3632\",\"guide_advanced_navigation-guards.md\":\"73b500ce\",\"guide_advanced_scroll-behavior.md\":\"60e3ea87\",\"guide_advanced_transitions.md\":\"9784e7ac\",\"guide_essentials_dynamic-matching.md\":\"18d86148\",\"guide_essentials_history-mode.md\":\"59a2bcce\",\"guide_essentials_named-routes.md\":\"f89ffec5\",\"guide_essentials_named-views.md\":\"41a2008e\",\"guide_essentials_navigation.md\":\"80b153b7\",\"guide_essentials_nested-routes.md\":\"ba58046f\",\"guide_essentials_passing-props.md\":\"bcc923d9\",\"guide_essentials_redirect-and-alias.md\":\"17e6ff8d\",\"guide_essentials_route-matching-syntax.md\":\"dec0fed1\",\"guide_index.md\":\"b96b8b52\",\"guide_migration_index.md\":\"f1c1eead\",\"index.md\":\"af883fea\",\"installation.md\":\"62f300a6\",\"introduction.md\":\"7557a17f\",\"zh_api_index.md\":\"9f7c32af\",\"zh_guide_advanced_composition-api.md\":\"a9ae8936\",\"zh_guide_advanced_data-fetching.md\":\"3402d49f\",\"zh_guide_advanced_dynamic-routing.md\":\"519d3549\",\"zh_guide_advanced_extending-router-link.md\":\"9ac39d5c\",\"zh_guide_advanced_lazy-loading.md\":\"4f7d5f99\",\"zh_guide_advanced_meta.md\":\"b231c4a4\",\"zh_guide_advanced_navigation-failures.md\":\"5e332799\",\"zh_guide_advanced_navigation-guards.md\":\"95378824\",\"zh_guide_advanced_scroll-behavior.md\":\"5a120e17\",\"zh_guide_advanced_transitions.md\":\"b1d10912\",\"zh_guide_essentials_dynamic-matching.md\":\"a2fdd595\",\"zh_guide_essentials_history-mode.md\":\"12d3427d\",\"zh_guide_essentials_named-routes.md\":\"7d1cfb92\",\"zh_guide_essentials_named-views.md\":\"26d1c4bb\",\"zh_guide_essentials_navigation.md\":\"80d9c078\",\"zh_guide_essentials_nested-routes.md\":\"db791098\",\"zh_guide_essentials_passing-props.md\":\"01c7eddf\",\"zh_guide_essentials_redirect-and-alias.md\":\"1d28625c\",\"zh_guide_essentials_route-matching-syntax.md\":\"d0f00217\",\"zh_guide_index.md\":\"522bf3e7\",\"zh_guide_migration_index.md\":\"d9210e4d\",\"zh_index.md\":\"3945a14c\",\"zh_installation.md\":\"f591290e\",\"zh_introduction.md\":\"a27a7262\"}")</script>
    <script type="module" async="" src="static/js/app.4a3417cf.js"></script>
    
  </body>
</html>